﻿{include file="common/header1" /}
    <div class="pay_tab_1 pay_tab">
        <div class="progress">
            <div class="one">
                <span>1</span>
                <p>Bag</p>
            </div>
            <div class="two">
                <span>2</span>
                <p>Delivery</p>
            </div>
            <div class="thr">
                <span>3</span>
                <p>Payment</p>
            </div>
        </div>
        <div class="new_box flex w1200">
            <div class="new_box_l ">
                <div class="pay_page  pay1">
                    <form action="">
                        <p class="p1">Hey, thanks for shopping with us!</p>
                        <p class="p2">Type in your email to get started</p>
                        <div class="create_form_group">
                            <label for="">Email Address:*</label>
                            <input type="text" id="express_email">
                        </div>
                        <div class="pay1_form_box">
                            <input type="checkbox" name="send">
                            <label for=""><img src="/public/home/xin/images/2_25.png"></label>
                            <p>We will send you marketing email about waht`s in your shopping basekt.Tick here if you don`t want these emails</p>
                        </div>
                        <div id="pay_tab_1_btn">CONTINUE</div>
                    </form>
                </div>
<!--                <div class="paypal">-->
<!--                    <p class="title">PayPal Checkout</p>-->
<!--                    <a href="" class="PayPal_Checkout">PayPal Checkout</a>-->
<!--                    <a href="" class="payment">You can enter a promo code before payment</a>-->
<!--                </div>-->
            </div>
            <div class="new_box_r">



                <div class="news_box_r_inner">
                    {foreach name="goodsList" item="goods"}
                    <div class="imgbox flex">
                        <span><img src="{$goods.goods_logo}"></span>
                        <div>
                            <p class="p1">{$goods.goods_name}</p>
                            <p class="p2">Accessory:One Size</p>
                            <p class="p3">
                                Colour:<span style="background: #d2bb9b;" class="colour"></span>
                            </p>
                        </div>
                    </div>
                    {/foreach}
                    <div class="money_list">
                        <p class="p1 flex">
                            <span class="span1">subtotal</span>
                            <span class="span2">$<span class="allMoney">{$goodsPrice}</span></span>
                        </p>
                        <p class="p2 flex">
                            <span class="span1">Australia Standard</span>
                            <span class="span2">${$express_price}</span>
                        </p>
                        <p class="p2 flex discount_price_box">
                            <span class="span1">Preferential</span>
                            <span class="span2 discount_price">- $0</span>
                        </p>
                        <p class="p3 flex">
                            <span class="span1">Grand total</span>
                            <span class="span2">
									$<span class="allMoney total_price">{$amount}</span>
									<i>（GST Included）</i>
								</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pay_tab_2 pay_tab">
        <div class="create_page w1200 pay2">
            <div class="progress">
                <div class="one">
                    <span><img src="/public/home/xin/images/PAY2_03.jpg" alt=""></span>
                    <p>Bag</p>
                </div>
                <div class="two">
                    <span>2</span>
                    <p>Delivery</p>
                </div>
                <div class="thr">
                    <span>3</span>
                    <p>Payment</p>
                </div>
            </div>
            <div class="new_box  flex w1200">
                <div class="new_box_l">

                    <form onsubmit="return false;" id="thisForm" method="post" enctype="multipart/form-data">
                        <p class="p1">Billing Information</p><br><br><br>

                        {if $addressList}
                            {foreach name="addressList" item="addL"}
                                {if $addL.is_default != 0}
                                <div class="create_form_group">
                                    <label for="name">Your Name:*</label>
                                    <input type="text" name="name" id="name" value="{$addL.name}">

                                </div>
                                <div class="create_form_group" id="province_span">
                                    <label for="province">Province:*</label>
                                    <select id="province" name="province">
                                        <option value="">请选择省份</option>
                                        {foreach name="province" item="pvc"}
                                        <option value="{$pvc.id}.{$pvc.name}" {if $addL.province == $pvc.name}selected{/if}>—— {$pvc.name} ——</option>
                                        {/foreach}
                                    </select>
                                </div>
                                <div class="create_form_group" id="city_span">
                                    <label for="city">City:*</label>
                                    <select id="city" name="city">
                                        {if $addL.city}
                                        {foreach name="city" item="cty"}
                                        <option value="{$cty.id}.{$cty.name}" {if $addL.city == $cty.name}selected{/if}>—— {$cty.name} ——</option>
                                        {/foreach}
                                        {/if}
                                    </select>
                                </div>
                                <div class="create_form_group" id="district_span">
                                    <label for="district">District:*</label>
                                    <select id="district" name="area">
                                        {if $addL.area}
                                        {foreach name="district" item="area"}
                                        <option value="{$area.id}.{$area.name}" {if $addL.area == $area.name}selected{/if}>—— {$area.name} ——</option>
                                        {/foreach}
                                        {/if}
                                    </select>
                                </div>
                                <div class="create_form_group">
                                    <label for="address">Address:*</label>
                                    <input type="text" id="address" name="address" placeholder="Srart typing your address..." value="{$addL.address}">
                                </div>
                                <div class="create_form_group">
                                    <label for="phone">Mobile Number:*</label>
                                    <input type="text" id="phone" name="phone" value="{$addL.phone}">
                                </div>
                                <input type="hidden" name="id" value="{$addL.id}">
                                {/if}
                            {/foreach}
                        {else}
                            <div class="create_form_group">

                                <label for="name">Your Name:*</label>
                                <input type="text" name="name" id="name">

                            </div>

                            <div class="create_form_group" id="province_span">
                                <label for="province">Province:*</label>
                                <select id="province" name="province">
                                    <option value="">请选择省份</option>
                                    {foreach name="province" item="pvc"}
                                    <option value="{$pvc.id}.{$pvc.name}">{$pvc.name}</option>
                                    {/foreach}
                                </select>
                            </div>

                            <div class="create_form_group" id="city_span">
                                <label for="city">City:*</label>
                                <select id="city" name="city">

                                </select>
                            </div>

                            <div class="create_form_group" id="district_span">
                                <label for="district">District:*</label>
                                <select id="district" name="area">

                                </select>
                            </div>
                            <div class="create_form_group">
                                <label for="address">Address:*</label>
                                <input type="text" id="address" name="address" placeholder="Srart typing your address...">
                            </div>
                            <div class="create_form_group">
                                <label for="phone">Mobile Number:*</label>
                                <input type="text" id="phone" name="phone">
                            </div>
                            <input type="hidden" name="id" value="0">
                        {/if}




<!--                        <a href="" class="manually">Find your address manually</a>-->
<!--                        <div class="create_form_group create_form_group_3">-->
<!--                            <input type="radio">-->
<!--                            <label for="">Ship to this address</label>-->
<!--                        </div>-->
<!--                        <div class="create_form_group create_form_group_3">-->
<!--                            <input type="radio">-->
<!--                            <label for="">Ship to different address</label>-->
<!--                        </div>-->

                        <div id="pay_tab_2_btn">CONTINUE</div>
                        <a href="javascript:;" class="manually back" id="pay_tab_2_back">Back</a>
                    </form>
                </div>
                <div class="new_box_r">
                    <div class="news_box_r_inner">
                        {foreach name="goodsList" item="goods"}
                        <div class="imgbox flex">
                            <span><img src="{$goods.goods_logo}"></span>
                            <div>
                                <p class="p1">{$goods.goods_name}</p>
                                <p class="p2">Accessory:One Size</p>
                                <p class="p3">
                                    Colour:<span style="background: #d2bb9b;" class="colour"></span>
                                </p>
                            </div>
                        </div>
                        {/foreach}
                        <div class="money_list">
                            <p class="p1 flex">
                                <span class="span1">subtotal</span>
                                <span class="span2">$<span class="allMoney">{$goodsPrice}</span></span>
                            </p>
                            <p class="p2 flex">
                                <span class="span1">Australia Standard</span>
                                <span class="span2">${$express_price}</span>
                            </p>
                            <p class="p2 flex discount_price_box">
                                <span class="span1">Preferential</span>
                                <span class="span2 discount_price">- $0</span>
                            </p>
                            <p class="p3 flex">
                                <span class="span1">Grand total</span>
                                <span class="span2">
									$<span class="allMoney total_price">{$amount}</span>
									<i>（GST Included）</i>
								</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pay_tab_3 pay_tab">
        <div class="pay_page  pay3">
            <div class="progress">
                <div class="one">
                    <span><img src="/public/home/xin/images/PAY2_03.jpg"></span>
                    <p>Bag</p>
                </div>
                <div class="two">
                    <span><img src="/public/home/xin/images/PAY2_03.jpg"></span>
                    <p>Delivery</p>
                </div>
                <div class="thr">
                    <span>3</span>
                    <p>Payment</p>
                </div>
            </div>
        </div>
        <div class="new_box flex w1200">
            <div class="new_box_l">
                <div class="pay_page">
                    <form onsubmit="return false;">
                        <p class="p1">Coupon Code</p>
                        <div class="create_form_group flex pay3_create_form_group">
                            <input type="text" id="coupon_code">
                            <button id="coupon_apply">APPLY</button>
                        </div>
                    </form>
                </div>
                <div class="paypal  pay3_form pay_page">
                    <p class="title">Shipping Method</p>
                    <form method="post" action="{:url('Flow/pay')}" id="done" enctype="multipart/form-data">

                        {foreach name="addressList" item="addL"}
                        {if $addL.is_default != 0}
                        <div class="pay_list_form flex">
                            <input type="radio" checked name="address_list" value="{$addL.id}">
                            <div class="product_name">
                                <p class="line1 flex">
                                    <i>{$addL.name}</i><span>{$addL.phone}</span>
                                </p>
                                <p class="line1">{$addL.province} {$addL.city} {$addL.area} {$addL.address}</p>
                            </div>

                        </div>
                        <input type="hidden" name="name" value="{$addL.name}">
                        <input type="hidden" name="phone" value="{$addL.phone}">
                        <input type="hidden" name="province" value="{$addL.province}">
                        <input type="hidden" name="city" value="{$addL.city}">
                        <input type="hidden" name="area" value="{$addL.area}">
                        <input type="hidden" name="address" value="{$addL.address}">
                        {else}
                        <div class="pay_list_form flex">
                            <input type="radio" checked name="address_list" value="{$addL.id}">
                            <div class="product_name">
                                <p class="line1 flex">
                                    <i>{$addL.name}</i><span>{$addL.phone}</span>
                                </p>
                                <p class="line1">{$addL.province} {$addL.city} {$addL.area} {$addL.address}</p>
                            </div>

                        </div>
                        {/if}
                        {/foreach}
                        <input type="hidden" name="pay_id" value="3">
                        <input type="hidden" name="express_email" value="">
                        <input type="hidden" name="cart_ids" value="{$cart_ids}">
                        <input type="hidden" name="goods_price" value="{$goodsPrice}">
                        <input type="hidden" name="express_price" value="{$express_price}">
                        <input type="hidden" name="coupon_id" value="0">
                        <input type="hidden" name="price_discount" value="0">
                        <input type="hidden" name="amount" value="{$amount}">
                        <input type="hidden" name="add_address" value="0">
                        <button type="submit" id="pay_tab_3_btn">CONTINUE</button>
                        <a href="javascript:;" class="manually back" id="pay_tab_3_back">Back</a>
                    </form>
                </div>
            </div>
            <div class="new_box_r">
                <div class="news_box_r_inner">
                    {foreach name="goodsList" item="goods"}
                    <div class="imgbox flex">
                        <span><img src="{$goods.goods_logo}"></span>
                        <div>
                            <p class="p1">{$goods.goods_name}</p>
                            <p class="p2">Accessory:One Size</p>
                            <p class="p3">
                                Colour:<span style="background: #d2bb9b;" class="colour"></span>
                            </p>
                        </div>
                    </div>
                    {/foreach}
                    <div class="money_list">
                        <p class="p1 flex">
                            <span class="span1">subtotal</span>
                            <span class="span2">$<span class="allMoney">{$goodsPrice}</span></span>
                        </p>
                        <p class="p2 flex">
                            <span class="span1">Australia Standard</span>
                            <span class="span2">${$express_price}</span>
                        </p>
                        <p class="p2 flex discount_price_box">
                            <span class="span1">Preferential</span>
                            <span class="span2 discount_price">- $0</span>
                        </p>
                        <p class="p3 flex">
                            <span class="span1">Grand total</span>
                            <span class="span2">
									$<span class="allMoney total_price">{$amount}</span>
									<i>（GST Included）</i>
								</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- 中间区域结束 -->
<script>
    $(".discount_price_box").hide();

    /* ★☆★☆★☆★☆★☆★☆★☆ 帐单地址切换 START ★☆★☆★☆★☆★☆★☆★☆ */
    $("input[name='address_list']").click(function () {
        var address_id = $(this).val();
        $.ajax({
            type: 'post',
            url: '/index/Member/get_address_info',
            data: {address_id: address_id},
            dataType: 'json',
            success: function (data) { //请求成功回调函数
                var m_status = data.status;
                var datalist = data.data

                if (m_status == 200) { //判断状态码，200为成功
                    var province_id = datalist.province_id+"."+ datalist.province
                    var city_id = datalist.city_id+"."+ datalist.city
                    var area_id = datalist.area_id+"."+ datalist.area
                    var express_price = datalist.express_price
                    var ID_card_front = datalist.ID_card_front
                    var ID_card_back = datalist.ID_card_back
                    // console.log(datalist)

                    $("input[name='name']").val(datalist.name)
                    $("input[name='phone']").val(datalist.phone)
                    $("select[name='province']").val(province_id)
                    $("select[name='city']").val(city_id)
                    $("select[name='area']").val(area_id)
                    $("input[name='address']").val(datalist.address)
                    $("#express_price").text(express_price)
                    // $("input[name='express_price']").val(express_price)
                    $("input[name='ID_card_front_old']").val(ID_card_front)
                    $("#preview").css("background-image","url("+ID_card_front+")");
                    $("input[name='ID_card_back_old']").val(ID_card_back)
                    $("#preview2").css("background-image","url("+ID_card_back+")");

                    var goods_price = $("input[name='goods_price']").val()
                    var amount = parseFloat(parseFloat(goods_price) + parseFloat(express_price)).toFixed(2)

                    $("#express_price").text(express_price)
                    $("#amount").text(amount)
                    $("input[name='express_price']").val(express_price)
                    $("input[name='amount']").val(amount)
                }
            }, error: function (data) {

            }
        });

    });
    /* ★☆★☆★☆★☆★☆★☆★☆ 帐单地址切换 END ★☆★☆★☆★☆★☆★☆★☆ */


    /* ★☆★☆★☆★☆★☆★☆★☆ 地区联动菜单 START ★☆★☆★☆★☆★☆★☆★☆ */
    $(function () {

        {if empty($default_address.city)}$("#city_span").hide();{/if}
        {if empty($default_address.area)}$("#district_span").hide();{/if}

        //初始化数据
        var url = '/index/Member/region'; //后台地址

        $("select[name='province']").change(function () { //监听下拉列表的change事件
            var region_id = $(this).val(); //获取下拉列表选中的值
            //发送一个post请求
            $.ajax({
                type: 'post',
                url: url,
                data: {key: region_id},
                dataType: 'json',
                success: function (data) { //请求成功回调函数
                    var m_status = data.status;
                    var datalist = data.data
                    var express_price = data.price

                    if (m_status == 200) { //判断状态码，200为成功
                        $("#city_span").show();
                        $("#district_span").hide();
                        var option = '';
                        console.log(data)
                        option = '<option>—— 请选择城市 ——</option>';
                        for (var i = 0; i < datalist.length; i++) { //循环获取返回值，并组装成html代码
                            option += '<option value="' + datalist[i].id + '.' + datalist[i].name + '">—— ' + datalist[i].name + ' ——</option>';
                        }
                        $("#city").html(option); //js刷新第二个下拉框的值

                        if(express_price > 0){
                            var goods_price = $("input[name='goods_price']").val()
                            var amount = parseFloat(parseFloat(goods_price) + parseFloat(express_price)).toFixed(2)

                            $("#express_price").text(express_price)
                            $("#amount").text(amount)
                            $("input[name='express_price']").val(express_price)
                            $("input[name='amount']").val(amount)
                        }
                    } else {
                        $("#city_span").hide();
                        $("#district_span").hide();
                        if(express_price > 0){
                            var goods_price = $("input[name='goods_price']").val()
                            var amount = parseFloat(parseFloat(goods_price) + parseFloat(express_price)).toFixed(2)

                            $("#express_price").text(express_price)
                            $("#amount").text(amount)
                            $("input[name='express_price']").val(express_price)
                            $("input[name='amount']").val(amount)
                        }
                    }
                }, error: function (data) {

                }
            });
        });

        $("select[name='city']").change(function () { //监听下拉列表的change事件
            var region_id = $(this).val(); //获取下拉列表选中的值
            //发送一个post请求
            $.ajax({
                type: 'post',
                url: url,
                data: {key: region_id},
                dataType: 'json',
                success: function (data) { //请求成功回调函数
                    var m_status = data.status;
                    var datalist = data.data

                    if (m_status == 200) { //判断状态码，200为成功
                        $("#district_span").show();
                        var option = '';
                        console.log(data)
                        option = '<option>—— 请选择县区 ——</option>';
                        for (var i = 0; i < datalist.length; i++) { //循环获取返回值，并组装成html代码
                            option += '<option value="' + datalist[i].id + '.' + datalist[i].name + '">—— ' + datalist[i].name + ' ——</option>';
                        }
                        $("#district").html(option); //js刷新第二个下拉框的值
                    } else {
                        $("#district_span").hide();
                    }
                }, error: function (data) {

                }
            });
        });

    });

    /* ★☆★☆★☆★☆★☆★☆★☆ 地区联动菜单 END ★☆★☆★☆★☆★☆★☆★☆ */

    /* ★☆★☆★☆★☆★☆★☆★☆ 地址提交事件 START ★☆★☆★☆★☆★☆★☆★☆ */
    $("#pay_tab_2_btn").click(function () {
        var name = $("input[name='name']").val();
        var phone = $("input[name='phone']").val();
        var province = $("select[name='province']").find("option:selected").val();
        var city = $("select[name='city']").find("option:selected").val();
        var area = $("select[name='area']").find("option:selected").val();
        var address = $("input[name='address']").val();
        var address_id = $("input[name='id']").val();
        if (address_id > 0){
            url = "{:url('Member/edit_address')}";
        }else{
            url = "{:url('Member/new_address')}";
        }


        if (!name) {
            layer.msg("请输入姓名", {
                icon: 5,
                time: 1000
            });
            return false
        }
        if (!phone) {
            layer.msg("请输入电话", {
                icon: 5,
                time: 1000
            });
            return false
        }
        if (!province) {
            layer.msg("请选择省份", {
                icon: 5,
                time: 1000
            });
            return false
        }
        if (!city && province != "402.海外") {
            layer.msg("请选择城市", {
                icon: 5,
                time: 1000
            });
            return false
        }
        if (!area && province != "402.海外") {
            layer.msg("请选择县区", {
                icon: 5,
                time: 1000
            });
            return false
        }
        if (!address) {
            layer.msg("请输入详细地址", {
                icon: 5,
                time: 1000
            });
            return false
        }

        var formdata = new FormData($("#thisForm")[0]);

        console.log(formdata);

        $.ajax({
            type: 'post',
            url: url,
            data: formdata,  //重点必须为一个变量如：data
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (data) {
                if (data.code > 0) {
                    // layer.msg(data.info, {
                    //     icon: 6,
                    //     time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    // }, function () {
                    //     window.location.reload();
                    // });
                } else {
                    // layer.msg(data.info, {
                    //     icon: 5,
                    //     time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    // }, function () {
                    //     return false
                    // });
                }

            },
            error: function () {
                layer.msg("提交失败，请稍后再试！", {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    return false
                });
            }
        })

    })
    /* ★☆★☆★☆★☆★☆★☆★☆ 地址提交事件 END ★☆★☆★☆★☆★☆★☆★☆ */

    /* ★☆★☆★☆★☆★☆★☆★☆ 提交优惠券并重新计算订单金额 START ★☆★☆★☆★☆★☆★☆★☆ */
    $("#coupon_apply").click(function () {
        var coupon_code = $("#coupon_code").val();
        var goods_price = $("input[name='goods_price']").val();
        $.ajax({
            type: 'post',
            url: '/index/Flow/coupon_price',
            data: {coupon_code: coupon_code, goods_price:goods_price},
            dataType: 'json',
            success:function(data){
                if (data.code > 0) {
                    if(data.info == '1'){
                        var new_price = data.data.new_price;
                        var discount = data.data.discount;
                        var rate = data.data.rate;
                        var coupon_id = data.data.coupon_id;
                        var inHtml = rate+"%";
                        $(".discount_price").html(inHtml);
                        $(".total_price").html(new_price);
                    }else{
                        var new_price = data.data.new_price;
                        var discount = data.data.discount;
                        var coupon_id = data.data.coupon_id;
                        var inHtml = "- $"+discount;
                        $(".discount_price").html(inHtml);
                        $(".total_price").html(new_price);
                    }
                    $("input[name='coupon_id']").val(coupon_id);
                    $("input[name='price_discount']").val(discount);
                    $("input[name='amount']").val(new_price);
                    $(".discount_price_box").show();
                }else{
                    layer.msg(data.info, {
                        icon: 5,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {});
                }

            },
            error:function(){
                layer.msg("提交失败，请稍后再试！", {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {});
            }
        });

    });
    /* ★☆★☆★☆★☆★☆★☆★☆ 提交优惠券并重新计算订单金额 END ★☆★☆★☆★☆★☆★☆★☆ */

    //提交结算
    $("#to_pay").click(function(){
        var address_list = $("select[name=address_list]").length

        if(address_list == 0){
            $("input[name=add_address]").val("1")
        }

        var name = $("#addr_name").val();
        var phone = $("#addr_phone").val();
        var province = $("#addr_province").find("option:selected").val();
        var city = $("#addr_city").find("option:selected").val();
        var area = $("#addr_area").find("option:selected").val();
        var address = $("#addr_address").val();

        if (!name) {
            layer.msg("请指定默认收货地址", {
                icon: 5,
                time: 1000
            });
            return false
        }


        //结算前检测是否有选择商品
        $('#done').submit();
    });



</script>
{include file="common/footer" /}